<template>
  <div class="main-content-actions-wrapper"
       :class="{
    left: position === 'left',
    right: position === 'right',
    center: position === 'center'
  }">
    <slot>
<!--      新建 添加 等各类按钮-->
    </slot>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  position?: ('right' | 'left' | 'center')
}

const {position} = withDefaults(defineProps<Props>(), {
  position: 'right'
})

</script>

<style scoped>
.main-content-actions-wrapper {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.left {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.right {
  justify-content: flex-end;
}
</style>
